<template>
  <el-container class="muzi">
    <el-header>
      <div class="left-panel">
        <el-button type="primary" @click="onCreate" plain>添加</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="search.keyword" placeholder="请输入关键字" class="tax-search-name" @blur="onSearch" clearable/>
          <el-button type="primary" icon="el-icon-search" :loading="search.loading" @click="onSearch"/>
        </div>
      </div>
    </el-header>

    <el-main>
      <el-table :data="pager.dataList" border>
        <el-table-column type="selection" width="45"/>
        <el-table-column prop="name" label="项目名称" align="center"/>
        <el-table-column prop="type" label="项目类型" align="center"/>
        <el-table-column prop="address" label="项目地址" align="center"/>
        <el-table-column prop="clientele.name" label="现场负责单位" align="center"/>
        <el-table-column prop="manager" label="项目经理" align="center"/>
        <el-table-column prop="owner" label="甲方" align="center"/>
        <el-table-column prop="contact" label="联系人" align="center"/>
        <el-table-column prop="mobile" label="联系电话" align="center"/>
        <el-table-column fixed="right" label="操作" min-width="145" align="center">
          <template #default="scope">
            <el-button type="info" icon="el-icon-files" circle @click="onTeam(scope.row)" title="点击查看包含班组"/>
            <el-button type="primary" icon="el-icon-edit" circle @click="onEdit(scope.row)"/>
            <el-button type="danger" icon="el-icon-delete" circle @click="onDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="operating" :gutter="5">
        <el-col :span="6">
          <el-pagination layout="prev, pager, next" :total="pager.total"/>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
/**
 * 页面施工中
 * @author Yufe
 * @version 1.0
 */
export default {
  name: '项目资料',
  components: {},
  data() {
    return {
      show: {
        form: false
      },
      search: {
        keyword: '',
        loading: false
      },
      clientele: {},
      pager: {
        total: 0,
        dataList: [],
        clean: function () {
          this.total = 0;
          this.dataList.length = 0;
        },
        fill: function ({total, dataList}) {
          this.total = total;
          this.dataList = dataList;
        }
      },
      operating: {
        loading: false
      }
    }
  },
  mounted() {
    const {serial} = this.$route.query;
    this.clientele = {serial}
    this.onSearch();
  },
  methods: {
    onSearch(number = 1) {
      this.$API.project.pager.get({number, serial: this.clientele.serial}).then(res => {
        if (res.success) {
          this.pager.fill(res.data)
        }
      })
    },
    onCreate() {
      this.$router.push({name: "project-form", query: {name: 123}})
    },
    /**
     * 班组信息
     * @param row
     */
    onTeam(row) {
      this.$router.push({name: "team", params: {id: row.id}})
    },
    onEdit(row) {
      this.$router.push({name: "project-form", query: {serial: row.id}})
    },
    onDelete(row) {
      this.$confirm(`确认要删除“${row.name}”吗?`, '警告提示', {type: 'warning',}).then(() => {
        this.$API.project.detail.delete(row.id).then(res => {
          if (res.success) {
            this.$message.success("删除成功")
            this.onSearch()
          }
        })
      }).catch((err) => {
        console.warn(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.muzi {
  .right-panel {
    .tax-search-name {
      width: 245px;
    }
  }

  .el-main {
    padding: 3px;
  }

  .operating {
    padding: 15px 10px;
  }
}
</style>
